<template>
  <view class="message">
    <view class="task-dashboard-navbar">
      <nut-navbar
        safe-area-inset-top
        :style="navbarStyle"
      >
        <template #left>
          <i
            style="font-size: 14px; color: #222"
            class="iconfont icon-a-gengduo-copybeifen2"
            @click="goPersonalCenter"
          ></i>
        </template>
        <template #content>
          <view class="my-file-list-menu">
            <text>消息</text>
            <img
              @click="flushMessages"
              src="https://img.alicdn.com/imgextra/i3/1034622205/O1CN01OTpH741S9wO3cWuy4_!!1034622205.png"
              alt=""
            />
          </view>
        </template>
        <template #right> </template>
      </nut-navbar>
    </view>
    <view
      class="message-content"
      :style="{ paddingTop: contentHeight }"
    >
      <view class="message-con-item">
        <view class="notice">
          <view class="notice-left">
            <text>点击开启推送通知</text>
            <text>团建活动、节假提醒、重要公告不错过！</text>
          </view>
          <view class="notice-right">
            <nut-button
              type="primary"
              size="mini"
              >开启</nut-button
            >
            <i class="iconfont icon-cha"></i>
          </view>
        </view>
        <view class="message-tabs">
          <view class="work-report-type">
            <view
              class="work-report-type-item"
              @click="handleWriteWorkReport"
            >
              <text class="text">待办</text>
              <img
                src="https://img.alicdn.com/imgextra/i3/1034622205/O1CN01B4El2o1S9wNWvd81g_!!1034622205.png"
                alt=""
              />
              <view class="message-tabs-num"><text>2</text></view>
            </view>
            <view class="work-report-type-item">
              <text class="text">日程</text>
              <img
                src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN011DLkM81S9wNXZYyQ8_!!1034622205.png"
                alt=""
              />
              <view class="message-tabs-num"><text>2</text></view>
            </view>
            <view class="work-report-type-item">
              <text class="text">会议</text>
              <img
                src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01TddwTA1S9wNYczwbk_!!1034622205.png"
                alt=""
              />
              <view class="message-tabs-num"><text>2</text></view>
            </view>
          </view>
        </view>
      </view>
      <view class="message-list">
        <view class="message-list-item">
          <nut-swipe-group lock>
            <nut-swipe name="22">
              <nut-cell>
                <template #title>
                  <view class="message-item-left">
                    <view class="left-img">
                      <img
                        src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01b4SLYh1S9wNw53GJw_!!1034622205.png"
                        alt=""
                      />
                      <text class="left-num">2</text>
                    </view>
                    <view class="left-text">
                      <view class="left-text-title">
                        <text class="left-text-title-name">官方通告</text>
                        <nut-tag
                          plain
                          type="primary"
                        >
                          全员
                        </nut-tag>
                      </view>
                      <text class="left-text-content"
                        >第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息</text
                      >
                    </view>
                  </view>
                </template>
                <template #link>
                  <view class="message-item-right">
                    <text class="right-text">12-12</text>
                    <view class="right-icon">
                      <i class="iconfont icon-c173pingbixiaoxitongzhi"></i>
                      <text class="xiaodian"></text>
                    </view>
                  </view>
                </template>
              </nut-cell>
              <template #right>
                <nut-button
                  class="button1"
                  shape="square"
                  style="height: 100%"
                  type="info"
                >
                  <i class="iconfont icon-zhidingxian"></i>
                  <text>置顶</text>
                </nut-button>
                <nut-button
                  class="button2"
                  shape="square"
                  style="height: 100%"
                  type="danger"
                >
                  <i class="iconfont icon-shanchu"></i>
                  <text>移除</text>
                </nut-button>
              </template>
            </nut-swipe>
          </nut-swipe-group>
        </view>
        <view class="message-list-item">
          <view class="message-item-title">
            <text>平台服务群</text>
          </view>
          <nut-swipe-group lock v-for="item in 5" :key="item">
            <nut-swipe name="22">
              <nut-cell>
                <template #title>
                  <view class="message-item-left">
                    <view class="left-img">
                      <img
                        src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01b4SLYh1S9wNw53GJw_!!1034622205.png"
                        alt=""
                      />
                      <text class="left-num">2</text>
                    </view>
                    <view class="left-text">
                      <view class="left-text-title">
                        <text class="left-text-title-name">官方通告</text>
                        <nut-tag
                          plain
                          type="primary"
                        >
                          全员
                        </nut-tag>
                      </view>
                      <text class="left-text-content"
                        >第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息第一时间接收消息</text
                      >
                    </view>
                  </view>
                </template>
                <template #link>
                  <view class="message-item-right">
                    <text class="right-text">12-12</text>
                    <view class="right-icon">
                      <i class="iconfont icon-c173pingbixiaoxitongzhi"></i>
                      <text class="xiaodian"></text>
                    </view>
                  </view>
                </template>
              </nut-cell>
              <template #right>
                <nut-button
                  class="button1"
                  shape="square"
                  style="height: 100%"
                  type="info"
                >
                  <i class="iconfont icon-zhidingxian"></i>
                  <text>置顶</text>
                </nut-button>
                <nut-button
                  class="button2"
                  shape="square"
                  style="height: 100%"
                  type="danger"
                >
                  <i class="iconfont icon-shanchu"></i>
                  <text>移除</text>
                </nut-button>
              </template>
            </nut-swipe>
          </nut-swipe-group>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getNavbarInfo } from "@/utils/system";
import Taro from "@tarojs/taro";
const contentHeight = ref();
const navbarStyle = ref({});
onMounted(async () => {
  if (process.env.TARO_ENV === "weapp") {
    const { statusBarHeight } = getNavbarInfo();
    navbarStyle.value = {
      paddingTop: `${statusBarHeight}px`,
    };
    contentHeight.value = `calc(44px + ${statusBarHeight}px)`;
  }
});
const flushMessages = () => {
  console.log("清空消息");
};
// 去个人中心
const goPersonalCenter = () => {
  console.log("去个人中心");

  //   Taro.navigateTo({
  // url: "/packageC/pages/personalCenter/index",
  //   });
};
</script>

<style lang="less">
@import url("./index.less");
</style>
